<template>
    <el-container class="layout-container">
      <el-header style="font-size: 12px" class="header-class">
        <span>进销存</span>
        <div class="toolbar">

<!--          <el-dropdown>-->
<!--            <el-icon style="margin-right: 8px; margin-top: 1px"-->
<!--            ><setting-->
<!--            /></el-icon>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item>View</el-dropdown-item>-->
<!--                <el-dropdown-item>Add</el-dropdown-item>-->
<!--                <el-dropdown-item>Delete</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
          <span>欢迎登录 : {{USERINFO.STAFFNAME}}</span>

          <span class="layout-class" @click="cnClickModifyPwd">密码修改</span>

          <span class="layout-class" @click="cnClickLayOut">退出</span>
        </div>
      </el-header>


      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['pur', 'sale', 'stock']" :default-active="activeMenu" @select="handleMenuSelect" router>
            <el-menu-item index="/pur">
              <el-icon><Postcard /></el-icon>采购
            </el-menu-item>
            <el-menu-item index="/sale">
              <el-icon><ScaleToOriginal /></el-icon>销售
            </el-menu-item>
            <el-menu-item index="/stock">
              <el-icon><Document /></el-icon>库存
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background: #f9f9f9">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  <el-dialog v-model="dialogVisible" title="密码修改" width="30%" draggable>

    <template #footer>
      <span class="dialog-footer" >
        <el-form label-position="right" label-width="80px" >
          <el-form-item label="新  密  码"  >
            <el-input v-model="newPwd" type="password" placeholder="请输入新密码"  />
          </el-form-item>
          <el-form-item label="确认密码" >
            <el-input v-model="confirmPwd" type="password" placeholder="请输入确认密码" />
          </el-form-item>
        </el-form>


<!--        <el-input v-model="newPwd" placeholder="Please input">-->
<!--          <template #prepend> 新  密  码 </template>-->
<!--        </el-input>-->
<!--        <el-input v-model="confirmPwd" placeholder="Please input">-->
<!--          <template #prepend>确认密码</template>-->
<!--        </el-input>-->
        <el-button @click="onClickCancel">取消</el-button>
        <el-button type="primary" @click="modifyPwd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue'
import {Document, Postcard, ScaleToOriginal, Setting} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import md5 from "js-md5"
import {ElMessage} from "element-plus";
import API from "@/utils/axiosInstance.js";

const { proxy } = getCurrentInstance();
proxy.$md5=md5

const router = useRouter();

const USERINFO = ref({});
const newPwd = ref('');
const confirmPwd = ref('');
const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
const activeMenu = ref("");
const dialogVisible = ref(false)

const  handleMenuSelect  = (index) =>{
  activeMenu.value = index;
  router.push(index);
}

const cnClickLayOut = () =>{
  localStorage.removeItem("USERINFO");
  router.push({
    path: "/"
  });
}

const cnClickModifyPwd = () =>{
  dialogVisible.value = true;
}

const onClickCancel = () =>{
  dialogVisible.value = false;
}

const modifyPwd = () =>{
  const tempNewPwd = proxy.$md5(newPwd.value);
  const tempConfirmPwd = proxy.$md5(confirmPwd.value);
  if(tempNewPwd!=tempConfirmPwd){
    ElMessage({
      showClose: true,
      message: '两次密码输入不一致，请检查！',
      type: 'error',
    })
  }else{
    let params = {};
    params["@STAFFID"] = USERINFO.value.STAFFID;
    params["@PASSWORD"] = tempNewPwd;  //
    params["M_PRO_NAME"] = "PROC_APP_MODIFYPWD";
    API.post('/call',params).then((res)=>{
      const data  = res.data;
      if(data.code==="200"){
        ElMessage({
          showClose: true,
          message: '修改成功！',
          type: 'success',
        })
        const  user = JSON.parse(localStorage.getItem("USER"))
        user.password = newPwd.value;
        console.log(user);
        localStorage.setItem("USER",JSON.stringify(user));
        onClickCancel();
      }else {
        ElMessage({
          showClose: true,
          message: '密码更改错误，请检查！',
          type: 'error',
        })
      }

    })
  }
}

onMounted(() => {
  // 设置默认菜单项
  activeMenu.value = router.currentRoute.value.path;
  USERINFO.value = JSON.parse(localStorage.getItem("USERINFO"));
});

</script>

<style scoped>
.layout-container{
  height: 100vh;

}
.header-class{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.header-class span{
  height: 60px;
  font-size: 40px;
  width: 200px;
  text-align: center;
}
.layout-class{
  cursor: pointer;
}
.toolbar span{

  height: 60px;
  font-size: 15px;
  width: 200px;
  text-align: center;
  line-height: 60px;
  padding-right:30px ;
}
.layout-container .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container .el-menu {
  border-right: none;
}
.layout-container .el-main {
  padding: 0;
}


</style>
